<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>做练习</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="./css/do_exercise_question.css"/>
</head>
<body>
<div id="wrap">
    <div v-for="Q in questionArr">
        <div v-if="questionNum==Q.number">
            <audio id="audio" :src="Q.audio_url" style="width:0;height:0" autoplay="autoplay"></audio>
            <h2 class="questionNowNum">Question {{Q.number}} of {{questionMaxNum}}</h2>
            <div class="audioArea" v-show="Q.audio_url!==''||Q.audio_url!==null||Q.audio_url!==undefined">
            <!--<div v-show="as">-->
                <div class="audioShow">
                    <p class="current-time">00:00</p>
                    <div class="circle">
                        <div class="loading"></div>
                    </div>
                    <p class="duration-time">00:00</p>
                </div>
            </div>
            <h3 class="questionEn">{{Q.content_en}}</h3>
            <div v-if="Q.type==1" v-for="(abc,$id) in Q.option" :key="abc.id">
                <p @click="changeAnswerFun(Q.type,abc.id,Q.id,Q.answer)" class="questionOption"
                   :class="{one_bg:abc.id==Qid?'isChange':''}">
                    {{abc.label}}:{{abc.content}}
                </p>
            </div>
            <div v-if="Q.type==2" v-for="(abc,$id) in Q.option" :key="abc.id">
                <p @click="chooseOrder($event,abc.id,Q.id,Q.answer)" class="questionOption"
                   :class="{one_bg:abc.id==Qid?'isChange':''}">
                    {{abc.label}}:{{abc.content}}
                </p>
            </div>
            <div v-if="Q.type==3" v-for="(abc,index) in Q.option" :key="abc.index">
                <p class="questionOption">
                    {{abc.label}}:{{abc.content}}
                    <span class="directionDown" @click="byOrderDown(index)">↓</span><span class="directionDown"
                                                                                          @click="byOrderUp(index)">↑</span>
                </p>
            </div>
            <table v-show="Q.type==4">
                <tr>
                    <td></td>
                    <td v-for="(c,index) in Q.option[0].columns">{{c.value}}</td>
                </tr>
                <tr v-for="(r,index_r) in Q.option[0].rows">
                    <td>{{r.value}}</td>
                    <td v-for="(c,index_c) in Q.option[0].columns">
                        <p class="td_p td_span_none"
                           @click="changeTableAnswerFun($event,index_r,index_c,Q.type,Q.answer,Q.id)">
                            ✔
                        </p>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="Timess"></div>
    <div class="seconds" style="display: none">0</div>
    <div class="Next" v-show="isNext" @click="NextFun()">next</div>
    <div class="Next" v-show="isSubmit" @click="submitFun()">submit</div>
</div>
</body>
</html>
<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/basis.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js" charset="utf-8"></script>
<script src="js/vue-router.js" charset="utf-8"></script>
<script src="js/jweixin-1.2.0.js" charset="utf-8"></script>
<script src="js/weixinShare.js" type="text/javascript" charset="utf-8"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
    var url = location.search;
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = ( strs[i].split("=")[1] );
        }
        console.log(theRequest);
    }
    var tis;
    var a1 = '', a2 = '';
    var vm = new Vue({
        el: '#wrap',
        data: {
            as: false,
            questionNum: 1,
            questiontype: '',
            tableanswer: '',
            questionMaxNum: '',
            questionArr: [],
            useranswerArr: [],
            useransweritem: '',
            moreanswerArr: [],
            orderitemid: [],
            trtdArr: [],
            trtdArritem: [],
            content_en: '',
            content_cn: '',
            audio_url: '',
            isChange: false,
            Qid: '',
            tr_index: -1,
            td_index: -1,
            time: '',
            timeStar: 0,
            timeEnd: 0,
            isNext: true,
            isSubmit: false,
            tablequestionID: '',
            table_answer: ''
        },
        created: function () {
            this.HttpDataFun();
        },
        methods: {
            HttpDataFun: function () {
                this.$http.post(URL + '/tpo/exercise/categories/scenario/exec/question/' + theRequest.id, {}).then(function (res) {
                    console.log(res.data.data);
                    if (res.data.status == 200) {
                        this.questionArr = res.data.data;
                        this.questionMaxNum = res.data.data.length;
                        for (var i = 0; i < this.questionArr.length; i++) {
                            res.data.data[i].option = eval(res.data.data[i].option);
                            if (res.data.data[i].type == 4) {
                                this.table_answer = res.data.data[i].answer
                            }

                        }
                        ;
                    }
                    if (res.data.status == 400) {
                        alert(res.data.message)
                    }
                    if (res.data.status == 500) {
                        alert(res.data.message)
                    }
                    this.TimeFun()

                }, function () {

                })

            },
            //获取做题时长
            TimeFun: function () {
                var tim = 0
                tis = setInterval(setTime, 1000);

                function setTime() {
                    tim++;
                    var m = Math.floor(tim / 60);
                    var s = Math.floor(tim % 60);
                    if (m < 10) {
                        m = '0' + m;
                    }
                    if (s < 10) {
                        s = '0' + s
                    }
                    this.timeEnd = tim;
//                    console.log(this.timeEnd);
                    $('.seconds').text(tim);
                    $('.Timess').text("Time:" + ' ' + m + ':' + s);
                }
            },
            //下一题
            NextFun: function () {
                if (this.questiontype == 4) {

                    var userAnswer = this.trtdArritem;
                    var tableAnswer = eval(this.table_answer);
                    var rightNum = 0;
                    var userAnswerarr = [];
                    for (var i = 0; i < userAnswer.length; i++) {
                        var userAnswerId1 = eval("(" + userAnswer[i] + ")").id;
                        var userAnswerResult1 = eval("(" + userAnswer[i] + ")").result;
                        for (var j = i + 1; j < userAnswer.length; j++) {
                            var userAnswerId2 = eval("(" + userAnswer[j] + ")").id;
                            var userAnswerResult2 = eval("(" + userAnswer[j] + ")").result;
                            if (userAnswerId1 == userAnswerId2) {
                                userAnswerResult1 = "[" + eval(userAnswerResult1).concat(eval(userAnswerResult2)) + "]";
                                userAnswer.splice(j, 1);
                            }
                        }
                        userAnswerarr.push("{id:" + userAnswerId1 + ",result:" + userAnswerResult1 + "}")
                    }
                    ;
                    userAnswer = userAnswerarr;
                    for (var tba = 0; tba < tableAnswer.length; tba++) {
                        var table_answer_id = tableAnswer[tba].id;
                        var table_answer_result = tableAnswer[tba].result;
                        for (var usa = 0; usa < userAnswer.length; usa++) {
                            var user_answer_id = eval("(" + userAnswer[usa] + ")").id;
                            var user_answer_result = eval("(" + userAnswer[usa] + ")").result;
                            if (table_answer_id == user_answer_id && table_answer_result - 0 == user_answer_result - 0) {
                                rightNum++;
                            }
                        }
                    }
                    if (rightNum == tableAnswer.length) {
                        this.trtdArr = {
                            "questionId": this.tablequestionID,
                            "userAnswer": "[" + this.trtdArritem + "]",
                            "duration": $('.seconds').text(),
                            "result": 1
                        }
                    } else {
                        this.trtdArr = {
                            "questionId": this.tablequestionID,
                            "userAnswer": "[" + this.trtdArritem + "]",
                            "duration": $('.seconds').text(),
                            "result": 0
                        }
                    }

//                    console.log(this.trtdArr)
                    this.useranswerArr.push(JSON.stringify(this.trtdArr));
                    this.questionNum++;
                    this.questiontype = '';
                    this.useransweritem = '';

                } else if (this.useransweritem !== '') {

                    this.questionNum++;
                    this.Qid = '';
                    if (this.questionNum >= this.questionMaxNum) {
                        this.questionNum = this.questionMaxNum;
                        this.isNext = false;
                        this.isSubmit = true;
                    }
                    ;
                    this.useranswerArr.push(JSON.stringify(this.useransweritem));
                    this.useransweritem = '';
                }
                this.timeStar = this.timeEnd;
                this.timeEnd = 0;
            },
            //保存答案
            submitFun: function () {
                clearInterval(tis);
                if (this.questiontype == 4) {
                    var userAnswer = this.trtdArritem;
                    var tableAnswer = eval(this.table_answer);
                    var rightNum = 0;
                    var userAnswerarr = [];
                    for (var i = 0; i < userAnswer.length; i++) {
                        var userAnswerId1 = eval("(" + userAnswer[i] + ")").id;
                        var userAnswerResult1 = eval("(" + userAnswer[i] + ")").result;
                        for (var j = i + 1; j < userAnswer.length; j++) {
                            var userAnswerId2 = eval("(" + userAnswer[j] + ")").id;
                            var userAnswerResult2 = eval("(" + userAnswer[j] + ")").result;
                            if (userAnswerId1 == userAnswerId2) {
                                userAnswerResult1 = "[" + eval(userAnswerResult1).concat(eval(userAnswerResult2)) + "]";

                                userAnswer.splice(j, 1);
                            }
                        }
                        userAnswerarr.push("{id:" + userAnswerId1 + ",result:" + userAnswerResult1 + "}")
                    }
                    ;
                    userAnswer = userAnswerarr;
                    for (var tba = 0; tba < tableAnswer.length; tba++) {
                        var table_answer_id = tableAnswer[tba].id;
                        var table_answer_result = tableAnswer[tba].result;
                        for (var usa = 0; usa < userAnswer.length; usa++) {
                            var user_answer_id = eval("(" + userAnswer[usa] + ")").id;
                            var user_answer_result = eval("(" + userAnswer[usa] + ")").result;
                            if (table_answer_id == user_answer_id && table_answer_result - 0 == user_answer_result - 0) {
                                rightNum++;
                            }
                        }
                    }
                    if (rightNum == tableAnswer.length) {
                        this.trtdArr = {
                            "questionId": this.tablequestionID,
                            "userAnswer": "[" + this.trtdArritem + "]",
                            "duration": $('.seconds').text(),
                            "result": 1
                        }
                    } else {
                        this.trtdArr = {
                            "questionId": this.tablequestionID,
                            "userAnswer": "[" + this.trtdArritem + "]",
                            "duration": $('.seconds').text(),
                            "result": 0
                        }
                    }
                    this.useranswerArr.push(JSON.stringify(this.trtdArr));
                    this.questionNum++;
                    this.questiontype = '';
                    this.useransweritem = '';
                } else if (this.useransweritem !== '') {
                    this.questionNum++;
                    this.Qid = '';
                    if (this.questionNum > this.questionMaxNum) {
                        this.questionNum = this.questionMaxNum;
                        this.isNext = false;
                        this.isSubmit = true;
                    }
                    this.useranswerArr.push(JSON.stringify(this.useransweritem));
                    this.useransweritem = '';
                }
                if (this.useranswerArr !== '') {

                    this.useranswerArr = '[' + this.useranswerArr.toString() + ']';
                    this.$http.post(URL + '/tpo/exercise/categories/scenario/exec/question/saveUserAnswer/' + theRequest.id, this.useranswerArr).then(function (res) {

                        console.log(res.data)
                        if (res.data.status == 200) {
                            window.location.href = 'check_answer.html?id=' + theRequest.id;
                        }

                    }, function () {

                    })
                }

            },
            //表格题
            changeTableAnswerFun: function (e, tr, td, type, tableanswer, questionID) {
                this.questiontype = type;
                this.tableanswer = tableanswer;
                this.tablequestionID = questionID;
                if (e.target.className.indexOf("td_span_none") == -1) {
                    e.target.className = "td_p td_span_none";
                } else {
                    e.target.className = "td_p td_span_block";
                }

                var trtdItem = JSON.stringify({"id": (tr + 1), "result": "[" + (td + 1) + "]"});
                var ifs = this.trtdArritem.some(function (x) {
                    return x == trtdItem;
                })
                if (ifs) {
                    for (var i = 0; i < this.trtdArritem.length; i++) {
                        if (this.trtdArritem[i] == trtdItem) {
                            console.log(i)
                            this.trtdArritem.splice(i, 1);
                        }
                    }
                } else {
                    this.trtdArr = this.trtdArritem.push(trtdItem);
                }
            },
            //多选题
            chooseOrder: function (e, abcId, questionID, answer) {

                if (e.target.className.indexOf("one_bg") == -1) {
                    e.target.className = "questionOption one_bg";

                } else {
                    e.target.className = "questionOption";
                }

                if (e.target.className == "questionOption one_bg") {
                    this.moreanswerArr.push(abcId);
                } else {
                    for (var i = 0; i < this.moreanswerArr.length; i++) {
                        if (this.moreanswerArr[i] == abcId) {
                            this.moreanswerArr.splice(i, 1)
                        }
                    }
                }


                var msa = this.moreanswerArr.sort(function (a, b) {
                    return a - b
                }).toString();
//                console.log(msa);
                if (msa == eval(answer).toString()) {
                    this.useransweritem = {
                        "questionId": questionID,
                        "userAnswer": "[" + msa + "]",
                        "duration": $('.seconds').text(),
                        "result": 1
                    };
                } else {
                    this.useransweritem = {
                        "questionId": questionID,
                        "userAnswer": "[" + msa + "]",
                        "duration": $('.seconds').text(),
                        "result": 0
                    };
                }
            },

            //排序向下
            byOrderDown: function (index) {
                for (var i = 0; i < this.questionArr.length; i++) {
                    if (this.questionArr[i].type == 3) {
//                        console.log(i);
//                        console.log(index);
                        var arr1 = this.questionArr[i].option;
                        var orderAnswer = this.questionArr[i].answer;
                        var quID = this.questionArr[i].id;
                        var hh = this.questionArr[i].option.splice(index, 1)[0];
                        arr1.splice(index + 1, 0, hh);

                        break;
                    }
                }
                for (var i = 0; i < arr1.length; i++) {
                    this.orderitemid.push(arr1[i].id)
                }
                if (eval(orderAnswer).toString() == this.orderitemid.toString()) {
                    this.useransweritem = {
                        "questionId": quID,
                        "userAnswer": "[" + this.orderitemid.toString() + "]",
                        "duration": $('.seconds').text(),
                        "result": 1
                    };
                } else {
                    this.useransweritem = {
                        "questionId": quID,
                        "userAnswer": "[" + this.orderitemid.toString() + "]",
                        "duration": $('.seconds').text(),
                        "result": 0
                    };
                }
                this.orderitemid = [];


            },
            //排序向上
            byOrderUp: function (index) {
                for (var i = 0; i < this.questionArr.length; i++) {
                    if (this.questionArr[i].type == 3) {
                        var arr1 = this.questionArr[i].option;
                        var orderAnswer = this.questionArr[i].answer;
                        var quID = this.questionArr[i].id;
                        var hh = this.questionArr[i].option.splice(index, 1)[0];
                        if (index - 1 < 0) {
                            index = 0
                            arr1.splice(index, 0, hh);
                        } else {
                            arr1.splice(index - 1, 0, hh);
                        }
                        break;
                    }
                }
//                console.log(arr1);
                for (var i = 0; i < arr1.length; i++) {
                    this.orderitemid.push(arr1[i].id)
                }
                if (eval(orderAnswer).toString() == this.orderitemid.toString()) {
                    this.useransweritem = {
                        "questionId": quID,
                        "userAnswer": "[" + this.orderitemid.toString() + "]",
                        "duration": $('.seconds').text(),
                        "result": 1
                    };
                } else {
                    this.useransweritem = {
                        "questionId": quID,
                        "userAnswer": "[" + this.orderitemid.toString() + "]",
                        "duration": $('.seconds').text(),
                        "result": 0
                    };
                }
                this.orderitemid = [];
            },
            //单选
            changeAnswerFun: function (data, id, questionID, answer) {
                if (data == 1) {
//                    console.log("单选题")
                    this.Qid = id;
                    this.isChange = true;
                    if ('[' + id + ']' == answer) {
                        this.useransweritem = {
                            "questionId": questionID,
                            "userAnswer": "[" + id + "]",
                            "duration": $('.seconds').text(),
                            "result": 1
                        };
                    } else {
                        this.useransweritem = {
                            "questionId": questionID,
                            "userAnswer": "[" + id + "]",
                            "duration": $('.seconds').text(),
                            "result": 0
                        };
                    }
//                    console.log(id, questionID, answer);

                }
            },

        },
        updated: function () {
//            alert(123);
            if ($('#audio').attr("src") !== '' && $('#audio').attr("src") !== null&& $('#audio').attr("src") !== undefined) {
//                alert($('#audio').attr("src"));
                $('.audioArea').css({display:'block'})
                var durationTime, currentTime, left;
                var width = $(".circle").width();
                if (a1 == '') {
                    a1 = $('#audio').attr("src");
                } else {
                    a2 = $('#audio').attr("src");
                }

                if (a1 != '' && a2 != '' && a1 != a2) {
                    $('#audio').attr("src", a2)
                }
                //兼容iOS微信自动播放
                document.addEventListener("WeixinJSBridgeReady", function () {
//                    alert('微信iOS自动播放' + $('#audio').attr("src"));
//                        document.getElementById('audio').load();
                    document.getElementById('audio').play();
                }, false);
                //获取播放时长
                $("#audio").on("canplay", function () {
//                        alert('总时长');
                    durationTime = document.getElementById("audio").duration;
                    $(".duration-time").html(setTime(durationTime));
                })

                //获取歌曲当前的播放时间
                function getCurrentTime() {
//                        alert('获取当前播放时间')
                    currentTime = document.getElementById("audio").currentTime;
                    $(".current-time").html(setTime(currentTime));
                    left = currentTime / durationTime * width;
                    $(".circle .loading").css("width", left + "px");
                }

                //播放完的时间处理
                var timer2 = setInterval(function () {
                    getCurrentTime()
                    if (currentTime >= durationTime) {
                        clearInterval(timer2);
                    }
                }, 500);

                // 时间格式化
                function setTime(x) {
                    var m = Math.floor(x / 60);
                    var s = x.toFixed(0) - m * 60;
                    m = m < 10 ? "0" + m : m;
                    s = s < 10 ? "0" + s : s;
                    return m + ":" + s;
                }

            }
//            $('#audio').attr("src") == '';
        },

    })


</script>
